<template>
  <div class="all">
    <!-- 顶部 -->
    <div class="top">
      <el-row>
        <el-col :span="1.5" :offset="6">
          <el-icon style="font-size: 80px; color: aliceblue">
            <ChromeFilled />
          </el-icon>
        </el-col>
        <el-col
          :span="8"
          style="font-size: 40px; color: aliceblue; padding-top: 1rem"
        >
          江西省统一身份认证平台
        </el-col>
        <el-col
          :span="2"
          style="font-size: 25px; color: aliceblue; padding-top: 1.8rem"
          >请你登录</el-col
        >
        <el-col :span="0.5" :offset="4">
          <a href="/" style="text-decoration: none">
            <el-icon
              style="font-size: 25px; color: aliceblue; padding-top: 1.8rem"
            >
              <Back />
            </el-icon>
            <span style="font-size: 25px; color: aliceblue">返回</span>
          </a>
        </el-col>
        <el-col :span="1"> </el-col>
      </el-row>
    </div>
    <!-- //中间放一张图片 -->
    <div class="mid">
      <img
        src="../../../assets/bgg.jpg"
        alt=""
        style="height: 24rem; width: 100%"
      />
    </div>
    <!-- //底部菜单栏 -->
    <div class="bottom">
      <div class="addr">地址:联微基地</div>
      <div class="connect">
        <a href="#">联系我们<br />电话号码:15270737056</a>
      </div>
    </div>
    <!-- 标签页 -->
    <div class="tab">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        type="border-card"
      >
        <el-tab-pane name="accountLogin">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><User /></el-icon>
              <span>账号登录</span>
            </span>
          </template>
          <!-- 表单 -->
          <div class="accountForm">
            <el-form :model="form" label-width="120px">
              <el-form-item style="margin-top: 2rem">
                <el-input
                  v-model="form.username"
                  style="width: 300px"
                  placeholder="请输入您的用户名/邮箱/身份证号"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="form.password"
                  style="width: 300px"
                  placeholder="请输入您的密码"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="form.password"
                  style="width: 200px"
                  placeholder="请输入图形验证码"
                />
                <img
                  src="../../../assets/bgg.jpg"
                  alt=""
                  style="width: 100px; height: 30px"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="
                    width: 300px;
                    color: aliceblue;
                    background-color: rgb(233, 21, 21);
                  "
                  >登录</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-col :span="12"
                  ><a href="" style="color: blue; text-decoration: none"
                    >忘记密码?</a
                  ></el-col
                >
                <el-col :span="12"
                  ><a href="" style="color: blue; text-decoration: none"
                    >立即注册</a
                  ></el-col
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane name="authCodeLogin">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><UserFilled /></el-icon>
              <span>验证码登录</span>
            </span>
          </template>
          <!-- 表单 -->
          <div class="authCodeForm">
            <el-form :model="form" label-width="120px">
              <el-form-item style="margin-top: 2rem">
                <el-input
                  v-model="form.username"
                  style="width: 300px"
                  placeholder="请输入你的邮箱"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="form.password"
                  style="width: 300px"
                  placeholder="请输入你的证件号后六位"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="form.password"
                  style="width: 200px"
                  placeholder="请输入验证码"
                />
                <el-button>获取验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="form.password"
                  style="width: 200px"
                  placeholder="请输入图形验证码"
                />
                <img
                  src="../../../assets/bgg.jpg"
                  alt=""
                  style="width: 100px; height: 30px"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="
                    width: 300px;
                    color: aliceblue;
                    background-color: rgb(233, 21, 21);
                  "
                  >登录</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-col :span="12"
                  ><a href="" style="color: blue; text-decoration: none"
                    >忘记密码?</a
                  ></el-col
                >
                <el-col :span="12"
                  ><a href="" style="color: blue; text-decoration: none"
                    >立即注册</a
                  ></el-col
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onBeforeMount, onMounted } from "vue";
import router from "../../../router/index.js";
import type { TabsPaneContext } from "element-plus";

//创建响应式对象
// 表单相关
const form = reactive({
  username: "",
  password: "",
});
// 标签页相关
const activeName = ref("accountLogin");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
};
//表单提交
const onSubmit = () => {
  console.log(form.username + form.password);
  router.push("/index/home");
};
onBeforeMount(() => {
  //组件挂载页面之前执行
});
onMounted(() => {
  //组件挂载到页面之后执行
});
</script>

<style lang='scss' scoped>
.top {
  background-color: rgb(233, 21, 21);
  height: 5rem;
}

.mid {
  height: 24rem;
}

.bottom {
  background-color: rgb(233, 21, 21);
  height: 10rem;

  .connect {
    position: absolute;
    right: 1rem;
    bottom: 2rem;
  }

  .addr {
    position: absolute;
    left: 1rem;
    bottom: 2rem;
  }
}

.tab {
  position: absolute;
  left: 30%;
  top: 13%;
  border: solid 0px aliceblue;
  border-radius: 4px;
  background-color: aliceblue;
  width: 500px;
  height: 400px;
  // 标签页css
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
  }
  .demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
  }
}
</style>
